<template>
  <div o-Container>
    <!-- <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <img
            @click="lookRow(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
            alt=""
          />
        </div>
      </template>
</o-list> -->
    <div class="OctopusList">
      <van-list>
        <van-cell-group>
          <van-cell class="head">
            <template>
              <div style="width: 30px;">{{ listTop.order }}</div>
            </template>
            <template>
              <div style="width: 35px;">{{ listTop.icon }}</div>
            </template>
            <template>
              <div style="width: 90px;">{{ listTop.IsRead }}</div>
            </template>
            <template>
              <div style="width: 700px;">{{ listTop.UserContent }}</div>
            </template>
            <template>
              <div style="width: 200px;">{{ listTop.TypeID }}</div>
            </template>
            <template>
              <div style="width:200px;">{{ listTop.CreateTime }}</div>
            </template>
          </van-cell>
          <van-cell v-for="(cell, index) in list" :key="cell.title">
            <template>
              <div style="width: 30px;" class="Number">{{ index + 1 }}</div>
            </template>
            <template>
              <div class="img_box" style="width: 35px;">
                <img @click="lookRow(cell)" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="" />
              </div>
            </template>
            <template>
              <div style="width: 90px;">
                <span v-if="cell.IsRead == 1" class="icon icon70chenggong"></span>
                <span v-if="cell.IsRead == 0" class="icon icon71shibai"></span>
              </div>
            </template>
            <template>
              <div style="width: 700px;">
                <el-tooltip class="item" effect="light" :content="cell.content" placement="top-start">
                  <div class="bdno">{{ cell.content }}</div>
                </el-tooltip>
              </div>

            </template>
            <template>
              <el-tooltip class="item" effect="light" :content="cell.DataValue" placement="top-start">
                <div style="width: 200px;">{{ cell.DataValue }}</div>
              </el-tooltip>
            </template>
            <template>
              <div style="width: 200px;">{{ cell.CreateTime }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>

      <el-pagination background layout="prev, pager, next" :total="totle" :current-page="pageIndex" :page-size="rowSize"
        @current-change="handleSalesChange">
      </el-pagination>
    </div>
    <MessageDialog ref="MessageDialog" :messageList="messageList"></MessageDialog>
  </div>
</template>

<script>
import MessageDialog from "./../Components/MessageDialog.vue";
export default {
  components: {
    MessageDialog
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      messageList: {},
      listTop: {
        UserContent: "消息通知",
        TypeID: "消息类型",
        CreateTime: "提示时间",
        IsRead: "是否已读",
        order: "",
        icon: "",
        title: "消息内容"
      },
      list: [],
      loading: false,
      totle: 0,
      pageIndex: 1,
      rowSize: 10
      // list: {
      //   contract: {
      //     data: {
      //       id: 1215,
      //       cellData: [
      //         { name: "IsRead", width: 50 }, // 是否已读
      //         { name: "UserContent", width: 400 }, // 消息内容
      //         { name: "TypeID" }, // 消息类型
      //         { name: "UserID" }, // 接收人
      //         { name: "TemplateID", width: 200 }, // 模板ID
      //         { name: "CreateUserID" }, // 创建人
      //         { name: "CreateTime", width: 200 }, // 创建时间
      //         { name: "ID", show: false } // ID
      //       ]
      //     },
      //     configWidth: 40,
      //     showNumber: true
      //   }
      // }
    };
  },
  created() {
    this.getList();
    this.getTotle();
  },
  methods: {
    examineMsg() {
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1215,
          type: "UPDATE",
          value: this.messageList.ID,
          cellData: [
            { name: "IsRead", defaultValue: 1 } // 状态
          ]
        },
        data => {
          if (data.status.code == 200) {
            // this.list.contract.control.load();
            this.getList()
          }
        }
      );
    },
    getTotle() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1404,
          cellData: [
            { name: "Count" }, // 总数
            { name: "page" } // 页数
          ],
          paramData: {
            UserID: this.octopus.passport.id
          }
        },
        data => {
          if (data.status.code == 200) {
            this.totle = data.content.queryData[0].Count;
          }
        }
      );
    },
    getList() {
      this.octopus.tools.openAPI(
        `/ESB/AIGC/PUSH/pushByUserId/${this.octopus.passport.id}/${this.pageIndex
        }`,
        {},
        datas => {
          if (datas.content.status.code == 200) {
            this.list = datas.content.content.list;
            this.totle   = datas.content.content.totalElements;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    lookRow(rows) {
      this.messageList = rows;
      if (this.messageList.IsRead != "是") {
        this.examineMsg();
      }
      this.$refs.MessageDialog.drawerOp();
    },
    handleSalesChange(e) {
      // console.log(e);
      this.pageIndex = e;
      this.getList();
    }
  }
};
</script>

<style scoped>
.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  /* height: 40px; */
  cursor: pointer;
}

.van-cell {
  padding: 0;
  font-size: 10px;
}

.van-cell .van-cell__value div {
  padding: 8px 4px 8px 4px;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;

  display: flex;
  align-items: center;
  justify-content: center;
}
.van-cell .van-cell__value div .bdno {
  border: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: unset;
  text-align: left;
}
.van-cell>>>div {
  display: flex;
}

.icon70chenggong {
  color: #1cab37;
  font-size: 12px;
}

.icon71shibai {
  color: #ff6839;
  font-size: 12px;
}

.van-cell.head {
  background: linear-gradient(#ffffff, #f6faf5);
  font-weight: 600;
}

.van-list {
  border: 1px solid #cccccc;
  margin-top: 3px;
  height: 95vh;
}

.OctopusList {
  /* padding: 10px; */
}

/*列表分页*/
.OctopusList .Page {
  color: #222222;
  margin: 5px 0 0 0;
}

.OctopusList .Page table {
  border-collapse: collapse;
  border-spacing: 0px;
}

.OctopusList .Page table tr td {
  padding-right: 3px;
}

.OctopusList .Page table tr td span {
  padding: 2px;
  border: 1px solid #d7d7d7;
  border-radius: 7px;
  box-shadow: 1px 1px 3px #e2e0e1;
  display: inline-block;
  min-width: 23px;
  cursor: pointer;
  text-align: center;
  top: 0px;
}

.OctopusList .Page table tr td span:hover {
  background: #e5e5e5;
}

.OctopusList .Page table tr .Current span {
  border: 1px solid #101010;
  background: #565656;
  color: white;
}

.OctopusList .Page table tr .Current span:hover {
  background: #b0b0b0;
  color: white;
}

.OctopusList .Page table tr .TotalInfo>span {
  border: none;
  box-shadow: none;
  cursor: default;
  font-weight: bold;
  color: #948d8d;
}

.OctopusList .Page table tr .TotalInfo>span:hover {
  background: white;
}

.OctopusList .Page table tr .TotalInfo>span>b {
  color: #f78c52;
  padding: 0 3px 0 3px;
}

.OctopusList .Page table tr .Home span {
  line-height: 16px;
}

.OctopusList .Page table tr .Previous span {
  line-height: 16px;
}

.OctopusList .Page table tr .Next span {
  line-height: 16px;
}

.OctopusList .Page table tr .End span {
  line-height: 16px;
}
</style>
